<script>
import EzViewerBuilder from "@/comps/viewer/EzViewerBuilder";
import EzViewer from "@/comps/viewer/EzViewer.vue";
import EzListViewer from "@/comps/list/EzListViewer.vue";
import listBuilder from "@/comps/list/listBuilder";
import TitleA from "@/comps/comm/TitleA.vue";

import apiBuyOrderProduct from "@/pages/v1/erp/BuyOrderProduct/js/apiBuyOrderProduct";
import apiBuyOrderPayment from "@/pages/v1/erp/BuyOrderPayment/js/apiBuyOrderPayment";
import apiBuyOrder from "@/pages/v1/erp/BuyOrder/js/apiBuyOrder";
import apiSellerBankCard from "@/pages/v1/erp/SellerBankCard/js/apiSellerBankCard";
import apis from "@/pages/v1/erp/BuyOrderPayment/js/api";

export default {
  name: "ViewerBuyOrderPayment",
  components: {TitleA, EzListViewer, EzViewer},
  props: {
    model: {id:0},
  },
  data() {
    let vb = EzViewerBuilder()
    vb.add("title", "单据主题", 7).setViewIsText()
    vb.add("sn", "单据编号", 3).setViewIsText().setViewCopy()
    vb.add("formEmp", "制单人", 2).setViewIsObjectName()

    vb.add("payType", "付款方式", 2).setViewIsObjectName()
    vb.add("deliver", "交货地点", 4).setViewIsText()
    vb.add("contactEmp", "业务员", 2).setViewIsObjectName()
    vb.add("contact", "联系人", 2).setViewIsText()
    vb.add("contactPhone", "联系电话", 2).setViewIsText()

    vb.add("num", "数量", 2).setViewIsText()
    vb.add("money", "金额", 10).setViewIsText()

    vb.add("note", "备注", 12).setViewIsText().setViewSpanSm(12)

    vb.add("status", "状态", 2).setViewIsStatus()
    vb.add("approvalSate", "评审状态", 2).setViewIsText()
    vb.add("approvalStage", "评审环节", 2).setViewIsText()
    vb.add("isConfirm", "是否生效", 2).setViewIsBool()
    vb.add("isCancel", "是否取消", 2).setViewIsBool()
    vb.add("isClose", "是否关闭", 2).setViewIsBool()

    vb.add("formAt", "制单时间", 2).setViewIsDate()
    vb.add("confirmAt", "生效时间", 2).setViewIsDate()
    vb.add("createAt", "创建时间", 2).setViewIsDateTime()
    vb.add("updateAt", "更新时间", 2).setViewIsDateTime()
    vb.add("createEmp", "创建人", 2).setViewIsObjectName()
    vb.add("", "", 2).setViewIsBlank()

    let lb = listBuilder()
    lb.add("id", "#", 80)
    // lb.add("belongTo","询价单",180).setListIsObject("title")
    lb.add("product", "产品", 180).setListIsObjectName()
    lb.add("num", "数量", 80)
    lb.add("unit", "单位", 80).setListIsObjectName()
    lb.add("taxRate", "税率", 180).setListIsObjectName()
    lb.add("price", "参考单价", 180)
    lb.add("money", "参考总价", 180)
    lb.add("note", "备注", 0)
    lb.add("row", "RN", 80)
    lb.add("belongToId", "询价单", 70)

    let lb_pay = listBuilder()
    lb_pay.add("id","#",80)
    lb_pay.add("type","付款类型",180).setListIsObjectName()
    lb_pay.add("applyEmp","申请人",120).setListIsObjectName()
    lb_pay.add("money","支付金额",120)
    lb_pay.add("payAt","支付时间",180).setListIsDateTime()
    lb_pay.add("payEmp","付款人",120).setListIsObjectName()
    lb_pay.add("isPay","是否付款",90).setIsSwitch()
    lb_pay.add("isLock","是否锁定",90).setIsSwitch()

    let bankCardItems = EzViewerBuilder()
    bankCardItems.add("name","单位名称",3).setViewIsText().setViewCopy()
    bankCardItems.add("bank","银行",3).setViewIsText().setViewCopy()
    bankCardItems.add("bankName","开户行",3).setViewIsText().setViewCopy()
    bankCardItems.add("card","卡号",3).setViewIsText().setViewCopy()

    return {
      items: vb.items,
      curTab: "main",
      //列表数据
      confList: lb.headers,
      data: [],
      confPayList: lb_pay.headers,
      payLog: [],
      inSideModel: null,
      sellerBankCards:[],
      bankCardItems:bankCardItems.items,
    }
  },
  mounted() {
    this.getData()
    this.getProduct()
    this.getPayment()
    this.getSellerBankCard()
  },
  methods: {
    getData() {
      apiBuyOrder.findBy({
        _where: {id: this.model.belongToId},
        _dumps: ["payType", "contactEmp", "status", "formEmp", "createEmp"],
        page: 1, limit: 1,
      }, res => {
        this.inSideModel = res[0]
      })
    },
    getProduct() {
      apiBuyOrderProduct.findBy({
        _where: {belongToId: this.model.belongToId},
        _dumps: ["belongTo", "product", "unit", "taxRate"],
        page: 1, limit: 0,
      }, res => {
        this.data = res
      })
    },
    getPayment() {
      apiBuyOrderPayment.findBy({
        _where: {belongToId: this.model.belongToId},
        _dumps: ["payEmp","applyEmp","type"],
        page: 1, limit: 0,
      }, res => {
        this.payLog = res
      })
    },
    getSellerBankCard(){
      apiSellerBankCard.findBy({
        _where: {sellerId: this.model.belongTo.sellerId},
        page: 1, limit: 0,
      },res=>{
        this.sellerBankCards = res
      })
    },

    confirm(id){
      this.$confirm('付款完成将锁定本条数据，是否继续？', '提示').then(({ result }) => {
        if (result) {
          apiBuyOrderPayment.confirm(id,res=>{
            this.$toast.success(res.message)
          })
        } else {
          this.$toast.message('已取消');
        }
      });
    },
  }
}
</script>

<template>
  <div class="" v-if="inSideModel">
    <div>
      <mu-tabs inverse class="bdc13" :value.sync="curTab">
        <mu-tab value="main">订单信息</mu-tab>
        <mu-tab value="action">确认操作</mu-tab>
      </mu-tabs>
    </div>
    <div class="bc13 pad10" v-if="curTab === 'action'">
      <title-a>付款账号信息</title-a>
      <div class="pad10 mar5 bdda tac c12" v-if="sellerBankCards.length === 0">尚未添加付款账号信息</div>
      <div class="marb5" v-for="(sellerBankCard,index) in sellerBankCards" :key="index" >
        <mu-row class="bdtso bdlso marlr5 mart10" fill :gutter="true" align-items="stretch">
          <mu-col fill class="pad3 bcf bdrso bdbso" :span="item.span" v-for="item in bankCardItems" :key="item.key">
            <div class="fwb fs9 tar padr3" style="width: 80px;" v-show="item.type!=='blank'">{{ item.label }}:</div>
            <div class="flex1">
              <EzViewer :config="item" :model="sellerBankCard"></EzViewer>
            </div>
          </mu-col>
        </mu-row>
      </div>
      <div class="pad10 tac" >
        <mu-button @click="confirm(model.id)">确认付款</mu-button>
      </div>
    </div>
    <div class="bc13 pad10" v-show="curTab === 'main'">
      <title-a class=" fs8">采购订单基础信息</title-a>
      <mu-row class="bdtso bdlso marlr5 mart10" fill :gutter="true" align-items="stretch">
        <mu-col fill class="pad3 bcf bdrso bdbso" :span="item.span" v-for="item in items" :key="item.key">
          <div class="fwb fs9 tar padr3" style="width: 80px;" v-show="item.type!=='blank'">{{ item.label }}:</div>
          <div class="flex1">
            <EzViewer :config="item" :model="inSideModel"></EzViewer>
          </div>
        </mu-col>
      </mu-row>
      <title-a class="mart20 fs8">采购明细列表</title-a>
      <mu-data-table stripe :columns="confList" :data="data" rowKey="id">
        <template slot-scope="scope">
          <td :align="col.align" v-for="col in confList" :key="`${scope.row.id}${col.name}`">
            <!--这个ID只是一个自定义的示例-->
            <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
            <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
          </td>
        </template>
      </mu-data-table>
      <title-a class="mart20 fs8">付款记录</title-a>
      <mu-data-table stripe :columns="confPayList" :data="payLog" rowKey="id">
        <template slot-scope="scope">
          <td :align="col.align" v-for="col in confPayList" :key="`${scope.row.id}${col.name}`">
            <!--这个ID只是一个自定义的示例-->
            <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
            <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
          </td>
        </template>
      </mu-data-table>
    </div>
  </div>
</template>

<style scoped>

</style>